<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>phatfusion : Drag</title>

<link rel="stylesheet" href="../_css/main.css" type="text/css" media="all">
<style type="text/css" media="screen">
	.drag {
		width: 30px;
		height: 30px;
		background-color: #607293;
		color: #fff;
		font-size: 1em;
		font-weight: bold;
		padding: 10px;
		margin-right: 20px;
		margin-top: 10px;
		position: relative;
	}
	
	#handle {
		position: absolute;
		bottom: 0px;
		right: 0px;
		width: 10px;
		height: 10px;
		background-color: #354158;
		cursor: se-resize;
	}
	
	#advanced p {
		margin-bottom: 1em;
	}
	
	#advancedDrag {
		overflow: hidden;
		height: 200px;
		cursor: ns-resize;
	}
	
</style>
<script type="text/javascript" src="../_core/mootools-1.2-core-nc.js"></script>
<script type="text/javascript" src="../drag/drag.js"></script>

<script type="text/javascript">
	window.addEvent('domready', function(){
		var myDrag = new Drag('basicDrag', {
		    snap: 0,
		    modifiers: {
		    	x: 'width',
		    	y: 'height'
		    },
		    handle: $('handle')
		});
		
		var myDragScroller = new Drag('advancedDrag', {
		    style: false,
		    invert: true,
		    modifiers: {x: 'scrollLeft', y: 'scrollTop'}
		});
	});
</script>

</head>
<body>

	<div id="container">
			<div id="header">
			<div id="logo"><a href="../../index.htm">home</a><h1>phatfusion</h1></div>
			<div class="nav">
				<span><a href="../_docs/index.htm">docs</a></span><span>.</span>
				<span><a href="../_demos/index.htm">demos</a></span><span>.</span>
				<span><a href="http://phatfusion.googlecode.com">svn</a></span><span>.</span><span><a href="http://phatfusion.blogspot.com/">blog</a></span><span>.</span>
				<span><a href="http://forum.phatfusion.net">forum</a></span>
			</div>
			<div class="desc">
				<p class="strap">javascript &amp; mootools plugins.</p>
			</div>
			</div>
		
		
		<h2>Drag</h2>
		<a class="view" href="http://docs.mootools.net/Plugins/Drag">view docs</a><p class="version">version 1.1</p>
		<p class="description">Enables the modification of two CSS properties of an Element based on the position of the mouse while the mouse button is down.</p>
		
		
		
		<h3>features</h3>
		<div>
			<ul>
				<li>snap to grid</li>
				<li>handles</li>
				<li>limits</li>
				<li>invert</li>
			</ul>
		</div>
		
		<h3>resize example</h3>
		<div id="basic">
			<div id="basicDrag" class="drag">resize me!<div id="handle"></div></div>
		</div>
		
		<h3>scroll example</h3>
		<p>click and drag the text<br><br></p>
		<div id="advanced">
			<div id="advancedDrag">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin magna mauris, fermentum eu, faucibus porta, adipiscing non, nulla. Suspendisse vitae diam ut nisl auctor sagittis. Morbi at enim at enim pellentesque eleifend. Vivamus lacus ante, ullamcorper eu, molestie quis, venenatis vitae, felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pellentesque pulvinar velit. Etiam lectus urna, bibendum quis, vulputate id, gravida eget, sapien. Mauris ac mi vel orci porta fringilla. Sed quis diam. Proin dictum. Nam commodo neque non nisi blandit accumsan. Quisque adipiscing est eget lacus. Proin vel nisi. Sed mattis risus ut mi. Morbi dolor. Nam sodales neque vitae lorem. Maecenas mi. Aliquam nisl. Nunc eget ante. Etiam felis.
			</p><p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus justo. Sed quis neque et diam varius rutrum. In hac habitasse platea dictumst. Nunc egestas, lorem sit amet venenatis consectetuer, nisl est auctor magna, in fringilla sem tortor in felis. Sed pulvinar pulvinar turpis. Aliquam posuere. Sed massa urna, egestas id, posuere ac, convallis ut, est. Ut nec purus. Morbi at mauris et nulla venenatis egestas. Aliquam erat volutpat. Praesent dictum volutpat nulla.
</p><p>
Nunc et lorem. Integer ut lorem non nisi egestas interdum. Aliquam ullamcorper vehicula est. Suspendisse a arcu. Mauris lectus tortor, hendrerit et, vulputate vitae, commodo quis, ligula. Cras condimentum, sem pretium luctus ornare, neque augue varius arcu, quis rhoncus sapien nulla eget neque. Sed a ligula. Nulla facilisi. Sed est. Aliquam massa metus, molestie a, vestibulum vel, iaculis in, velit. In vel justo ac turpis auctor hendrerit. Vestibulum tincidunt. Phasellus nisi nisl, tempus a, posuere eu, placerat quis, justo. Praesent magna.
</p><p>
Quisque molestie arcu nec elit mollis facilisis. Donec eu diam. Praesent ut enim at sapien dictum semper. Duis nisl nisl, condimentum a, tempor a, accumsan nec, est. Integer ullamcorper odio in nisi. Suspendisse ut quam. Nunc aliquam elit scelerisque leo. Cras imperdiet. Nulla facilisis, justo sed ornare luctus, lorem libero cursus leo, at vulputate magna odio non dui. Aenean nec est ut urna dapibus vulputate. Nam mollis. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin magna mauris, fermentum eu, faucibus porta, adipiscing non, nulla. Suspendisse vitae diam ut nisl auctor sagittis. Morbi at enim at enim pellentesque eleifend. Vivamus lacus ante, ullamcorper eu, molestie quis, venenatis vitae, felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pellentesque pulvinar velit. Etiam lectus urna, bibendum quis, vulputate id, gravida eget, sapien. Mauris ac mi vel orci porta fringilla. Sed quis diam. Proin dictum. Nam commodo neque non nisi blandit accumsan. Quisque adipiscing est eget lacus. Proin vel nisi. Sed mattis risus ut mi. Morbi dolor. Nam sodales neque vitae lorem. Maecenas mi. Aliquam nisl. Nunc eget ante. Etiam felis.
			</p><p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus justo. Sed quis neque et diam varius rutrum. In hac habitasse platea dictumst. Nunc egestas, lorem sit amet venenatis consectetuer, nisl est auctor magna, in fringilla sem tortor in felis. Sed pulvinar pulvinar turpis. Aliquam posuere. Sed massa urna, egestas id, posuere ac, convallis ut, est. Ut nec purus. Morbi at mauris et nulla venenatis egestas. Aliquam erat volutpat. Praesent dictum volutpat nulla.
</p><p>
Nunc et lorem. Integer ut lorem non nisi egestas interdum. Aliquam ullamcorper vehicula est. Suspendisse a arcu. Mauris lectus tortor, hendrerit et, vulputate vitae, commodo quis, ligula. Cras condimentum, sem pretium luctus ornare, neque augue varius arcu, quis rhoncus sapien nulla eget neque. Sed a ligula. Nulla facilisi. Sed est. Aliquam massa metus, molestie a, vestibulum vel, iaculis in, velit. In vel justo ac turpis auctor hendrerit. Vestibulum tincidunt. Phasellus nisi nisl, tempus a, posuere eu, placerat quis, justo. Praesent magna.
</p><p>
Quisque molestie arcu nec elit mollis facilisis. Donec eu diam. Praesent ut enim at sapien dictum semper. Duis nisl nisl, condimentum a, tempor a, accumsan nec, est. Integer ullamcorper odio in nisi. Suspendisse ut quam. Nunc aliquam elit scelerisque leo. Cras imperdiet. Nulla facilisis, justo sed ornare luctus, lorem libero cursus leo, at vulputate magna odio non dui. Aenean nec est ut urna dapibus vulputate. Nam mollis. </p>
			</div>
		</div>
		

		
		<div id="footer">
			
		</div>
		
		
	</div>

</body>
</html>